<template>
    <div class="login-wrapper">
        <div class="wrapper">
            <div class="close clearfix">
                <a href="javascript:;" @click="close"><Icon type="close-round" size="16"></Icon></a>
            </div>
            <div class="title">
                <h2 class="clearfix">
                    <span>会员登录</span>
                    <p>还没有账号&nbsp;&nbsp;<a>立即注册</a></p>
                </h2>
            </div>
            <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入用户名" />
            </div>
            <div class="form-group">
                <input type="password" class="form-control" placeholder="请输入密码"/>
            </div>
            <Button type="success" long>登录</Button>
            <p class="help"><a href="javascript:;" class="forgot">忘记密码？</a></p>
            <div class="oauth clearfix">
                <p>使用第三方账号直接登录</p>
                <a class="qq">
                    <i></i>
                    <span>QQ账号登录</span>
                </a>
                <a class="wechat">
                    <i></i>
                    <span>微信账号登录</span>
                </a>
            </div>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default{
        data(){
            return{

            }
        },
        methods:{
            close(){
                this.$store.dispatch('login',false)
            }
        }
    }
</script>
<style scoped>
    ::-webkit-input-placeholder{
        color:#999;
    }
    :-moz-placeholder{
        color:#999;
    }
    ::-moz-placeholder{
        color:#999;
    }
    :-ms-input-placeholder{
        color:#999;
    }
    .login-wrapper{ position: fixed; top:0; right:0; bottom:0; left:0; background:rgba(0,0,0,0.3); }
    .wrapper{ padding:20px 30px; background:#fff; width:400px; position: absolute; left:50%; margin-left:-200px; top:50px;}
    .close a{ float: right;}
    .title{ margin-top:30px; margin-bottom:30px;}
    .title h2{ text-align:center;}
    .title h2 span{ font-size:26px; float: left;}
    .title p{ float: right; font-size:16px; color:#999; position: relative; top:10px;}
    .title p a{ color:#15ccac;}
    .form-group{ margin-bottom:20px;}
    .form-control{ width:100%; height:35px; outline:none; padding:0 10px; border:1px solid #666;}
    .form-control:focus{ border-color:#15ccac;}
    .help{ margin-top:10px;}
    .forgot:hover{ color:#19be6b; text-decoration:underline;}
    .oauth{ border-top:1px solid #ccc; margin-top:30px; padding-top:20px; padding-bottom:20px;}
    .qq,.wechat{ box-sizing:border-box; width:40%; float: left; padding:5px 10px; color:#fff; display:flex; align-content:center; margin-top:20px; border-radius:3px;}
    .qq{ background:#1296db;}
    .wechat{ background:#0fd01c; margin-left:20%;}
    .qq i,.wechat i{ width:20px; height:20px; float: left;}
    .qq i{ background:url('../assets/images/icon/qq.svg') no-repeat; background-size:100% 100%;}
    .wechat i{ background:url('../assets/images/icon/wechat.svg') no-repeat; background-size:100% 100%;}
    .qq span,.wechat span{ margin-left:10px; position: relative; top:3px;}
</style>